
<!-- Diagram-page layout -->
<div id="diagram-page">
   <div id="diagram-select" class="faux-select" action="DC.DiagramChoice.toggleChoices()">
      <ul id="diagram-choices" class="faux-select-options hide-on-clean"></ul>
      <span id="diagram-choice" class="faux-selection">Generate diagram</span>
      <div class="faux-select-arrow"></div>
   </div>
   <template id="diagram-select-first-template">
      <li action="DC.DiagramChoice.selectDiagram()">${MathML.sansText('Generate diagram')}</li>
   </template>
   <template id="diagram-select-other-template">
      <li action="DC.DiagramChoice.selectDiagram('${diagram.name}')">${MathML.sansText(diagram.name)}</li>
   </template>

   <div id="generation-control">
      <div class="graphic-lead">Generate diagram this way:</div>
      <div id="generation-strategy" style="position: relative">
         <table>
            <thead>
               <tr>
                  <th></th>
                  <th>Generator</th>
                  <th>Axis</th>
                  <th>Order</th>
               </tr>
            </thead>
            <tbody id="generation-table">
            </tbody>
         </table>

         <!-- Templates for generation-strategy table -->
         <template id="generation-table-row-template">
            <tr>
               <td draggable="true">${inx+1}</td>
               <td action="DC.Generator.showGeneratorMenu(event, ${inx})">
                  ${MathML.sans(group.representation[strategy.generator])}
               </td>
               <td action="DC.Generator.showAxisMenu(event, ${inx})">
                  <img src="./images/${DC.Generator.axis_image[strategy.layout][strategy.direction]}">
                  ${DC.Generator.axis_label[strategy.layout][strategy.direction]}
               </td>
               <td action="DC.Generator.showOrderMenu(event, ${inx})">
                  ${DC.Generator.orders[num_strategies][strategy.nesting_level]}
               </td>
            </tr>
         </template>

         <template id="generation-generator-menu-template">
            <ul id="generation-generator-menu" class="menu remove-on-clean">
               ${makeEligibleGeneratorList()}
               <hr>
               ${Menu.makeLink('Organize by', 'generation-organize-by-menu')}
            </ul>
            <ul id="generation-organize-by-menu" class="menu remove-on-clean">${DC.Generator.makeOrganizeByMenu()}</ul>
         </template>
         <template id="generation-generator-menu-item-template">
            <li action="DC.Generator.updateGenerator(${strategy_index}, ${generator})">
               ${MathML.sans(group.representation[generator])}</li>
         </template>

         <template id="generation-axis-menu-template">
            <ul id="generation-axis-order-menu" class="menu remove-on-clean">
               <li action="DC.Generator.updateAxes(${strategy_index}, 0, 0)">${DC.Generator.axis_label[0][0]}</li>
               <li action="DC.Generator.updateAxes(${strategy_index}, 0, 1)">${DC.Generator.axis_label[0][1]}</li>
               <li action="DC.Generator.updateAxes(${strategy_index}, 0, 2)">${DC.Generator.axis_label[0][2]}</li>
               <div class="${curvable ? '' : 'hidden'}">
                  <li action="DC.Generator.updateAxes(${strategy_index}, 1, 2)">${DC.Generator.axis_label[1][2]}</li>
                  <li action="DC.Generator.updateAxes(${strategy_index}, 1, 1)">${DC.Generator.axis_label[1][1]}</li>
                  <li action="DC.Generator.updateAxes(${strategy_index}, 1, 0)">${DC.Generator.axis_label[1][0]}</li>
                  <li action="DC.Generator.updateAxes(${strategy_index}, 2, 2)">${DC.Generator.axis_label[2][2]}</li>
                  <li action="DC.Generator.updateAxes(${strategy_index}, 2, 1)">${DC.Generator.axis_label[2][1]}</li>
                  <li action="DC.Generator.updateAxes(${strategy_index}, 2, 0)">${DC.Generator.axis_label[2][0]}</li>
               </div>
               <hr>
               ${Menu.makeLink('Organize by', 'generation-organize-by-menu')}
            </ul>
            <ul id="generation-organize-by-menu" class="menu remove-on-clean">${DC.Generator.makeOrganizeByMenu()}</ul>
         </template>

         <template id="generation-order-menu-template">
            <ul id="generation-order-menu" class="menu remove-on-clean">
               ${makeStrategyList()}
               <hr>
               ${Menu.makeLink('Organize by', 'generation-organize-by-menu')}
            </ul>
            <ul id="generation-organize-by-menu" class="menu remove-on-clean">${DC.Generator.makeOrganizeByMenu()}</ul>
         </template>
         <template id="generation-order-menu-item-template">
            <li action="DC.Generator.updateOrder(${strategy_index}, ${order})">
               ${DC.Generator.orders[num_strategies][order]}</li>
         </template>

         <template id="generation-organize-by-menu-item-template">
            <li action="DC.Generator.organizeBy(${inx})">
               ${MathML.sans(MathML.sub('H', inx))}, ${MathML.sansText('a subgroup of order')}
               ${MathML.sans('<mn>' + subgroup.order + '</mn>')}</li>
         </template>
      </div>
   </div>

   <div id="arrow-control">
      <div class="graphic-lead">Show these arrows:</div>
      <div id="arrow-selections" class="horiz">
         <div id="arrow-display">
            <ul id="arrow-list"></ul>
            <template id="arrow-list-item-template">
               <li arrow="${element}" color="${color}" action="DC.Arrow.selectArrow(${element})"><hr style="border: 2px solid ${color}">
                  ${MathML.sans(group.representation[element])}</li>
            </template>
         </div>
         <div id="arrow-buttons" class="vert">
            <button id="add-arrow-button" action="DC.Arrow.showArrowMenu(event)">Add</button>
            <button id="remove-arrow-button" action="DC.Arrow.removeArrow()" disabled class="disable-on-clean">Remove</button>
         </div>

         <template id="arrow-menu-template">
            <ul id="arrow-menu" class="menu remove-on-clean" style="min-width: 80px">
               ${makeArrowList()}
            </ul>
         </template>
         <template id="arrow-menu-item-template">
            <li action="DC.Arrow.addArrow(${element})">${MathML.sans(group.representation[element])}</li>
         </template>
      </div>
   </div>

   <form id="multiplication-control" class="graphic-lead" style="margin-bottom: 0">
      Arrows mean
      <div>
         <input name="multiplication" type="radio" id="right" onclick="DC.ArrowMult.setMult('right')" checked>
         <label for="right">right multiplication</label>
      </div>
      <div>
         <input name="multiplication" type="radio" id="left" onclick="DC.ArrowMult.setMult('left')">
         <label for="left">left multiplication</label>
      </div>
   </form>

   <div id="chunk-control" style="position: relative">
      <div class="graphic-lead">Chunk this subgroup:</div>
      <div id="chunk-select" class="faux-select" action="DC.Chunking.toggleChoices()">
         <ul id="chunk-choices" class="faux-select-options hide-on-clean"></ul>
         <span id="chunk-choice" class="faux-selection">(no chunking)</span>
         <div class="faux-select-arrow"></div>
      </div>

      <template id="chunk-select-first-template">
         <li action="DC.Chunking.selectChunk(0)">${MathML.sansText('(no chunking)')}</li>
      </template>
      <template id="chunk-select-other-template">
         <li action="DC.Chunking.selectChunk(${subgroup_index})">
            ${MathML.sans(MathML.sub('H', subgroup_index))}, ${MathML.sansText('generated by')}
            ${MathML.setList(generators)}

         </li>
      </template>
      <template id="chunk-select-last-template">
         <li action="DC.Chunking.selectChunk(${group.subgroups.length-1})">${MathML.sansText('The whole group')}</li>
      </template>

      <div id="chunking-fog" class="fog hidden"></div>
   </div>
</div>
